<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" 
                    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="../文件/vue.js"></script>
    <title>线上预约挂号</title>
</head>
<body>
  <div id="app">
    <!-- 导航栏区域 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <a class="navbar-brand" href="#">东方医院</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        <!-- 首页 -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">   
              <li class="nav-item mx-3">
                <a class="nav-link active" aria-current="page" href="#">首页</a>
              </li>
        <!-- 医院概况 -->
              <li class="nav-item dropdown mx-3">
                <a id="my-dropdown" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">医院概况</a>
                <div class="dropdown-menu" aria-labelledby="my-dropdown">
                    <a class="dropdown-item " href="#">医院介绍</a>
                    <a class="dropdown-item " href="#">组织架构</a>
                    <a class="dropdown-item " href="#">医院历史</a>
                </div>
              </li>
        <!-- 医疗服务 -->
              <li class="nav-item dropdown mx-3">
                <a id="my-dropdown" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">医疗服务</a>
                <div class="dropdown-menu" aria-labelledby="my-dropdown">
                    <a class="dropdown-item " href="#">医院介绍</a>
                    <a class="dropdown-item " href="#">组织架构</a>
                    <a class="dropdown-item " href="#">医院历史</a>
                </div>
              </li>
        <!-- 科室导航 -->
              <li class="nav-item mx-3">
                <a class="nav-link" href="#">科室导航</a>
              </li>
        <!-- 学术交流 -->
              <li class="nav-item mx-3">
                <a class="nav-link" href="#">学术交流</a>
              </li>
            </ul>
        <!-- 搜索框 -->
            <form class="form-inline mx-3" method="get" action="">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索科室，医生" aria-label="Search">
                <button class="btn btn-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
          </div>
    </nav>

    <!-- 巨型屏幕区域 -->
    <div class="jumbotron jumbotron-fluid pb-0 pt-5">
        <div class="container pl-0">
          <h1 class="display-4">线上预约挂号</h1>
          <p class="lead">东方医院</p>
        </div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item active" aria-current="page">科室导航</li>
              <li class="breadcrumb-item"><a href="#l">门诊排班</a></li>
              <li class="breadcrumb-item"><a href="./page2.html">就诊人管理</a></li>
              <li class="breadcrumb-item"><a href="#">预约挂号</a></li>
            </ol>
          </nav>
    </div>

    <!-- 左侧列表 -->
    <div class="left">
          <p>科室导航</p>
          <div class="box1">
            <div v-for="item in keshi">
            <p style="font-size:larger;">{{item.name}}</p>
            <ul class="list-group" v-for="i in item.aa">
                <li class="list-group-item">{{i}}</li>
            </ul>
          </div>
          </div>
    </div>

    <!-- 右侧表格 -->
    <div class="right">
          <p>东方名医</p>
          <div class="doctor">
          <div v-for="item in doctor">
              <img v-bind:src="item.src" alt="">
              <div class="yisheng" >
                  <p>{{item.name}}</p>
                  <span>{{item.age}} | 教授</span>
                  <span>神经外科</span>
                  <button>挂号</button>
              </div>
          </div>
        </div>
    </div>

    <!-- 页面页脚 -->
    <div class="jumbotron text-center mb-0" style="margin-top: 8rem;" >
      <h1 class="display-4">csuft</h1>
      <p class="lead">中南林业科技大学</p>
    </div> 
  </div> 

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

<script>
  let v1 = new Vue({
      el: '#app',
      data:{
         doctor:[
         {
          src:'./pictures/lucky.png',
          name:"张三",
          age:18
         },
         {
          src:'./pictures/6.jpg',
          name:"李四",
          age:20
         },
         {
          src:'./pictures/7.jpg',
          name:"王五",
          age:30
         },
         {
          src:'./pictures/8.jpg',
          name:"华佗",
          age:40
         },
         {
          src:'./pictures/9.jpg',
          name:"扁鹊",
          age:50
         },
         {
          src:'./pictures/10.jpg',
          name:"张仲景",
          age:60
         }
         ],
         keshi:[
          {
            name:"内科",
            aa:["心脏内科","肝脏内科","肾脏内科","胃肠内科"]
          },
          {
            name:"妇科",
            aa:["生产妇科","新生儿妇科","成人妇科"]
          },
          {
            name:"儿科",
            aa:["幼儿儿科","新生儿儿科","儿童儿科"]
          }
         ],
        }
  });
</script>

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .left {
        float: left;
        height: 150px;
        width: 300px;
        padding-left: 100px;
        padding-top: 10px;
      }
    .left p {
        font-size: 20px;
      }
      .box1 {
        border: 1px solid #ccc;
        padding: 10px 5px;
        
      }
      .box1 p{
        margin: 0 20px;
        font-size: 16px;
        margin-top: 5px;
      }
      .box2 {
        margin: 0 20px;
        border: 1px solid #ccc;
        height: 100px;
        width: 150px;
        margin-top: 7px;
      }
      .box2 li {
        list-style-type: none;
      }
      .box2 li a {
        color: rgb(58, 144, 242);
        display: block;
        text-decoration: none;
        height: 32px;
        width: 148px;
        line-height:32px;
        font-size: 13px;
        padding-left: 10px;
        font-weight: 530;
      }
    .right {
        padding-left: 320px;
    }
    .doctor {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .right p {
        font-size: 30px;
        font-weight: 330;
      }
    .doctor > div {
        float: left;
        height: 270px;
        width: 220px;
        margin-right: 30px;
        border: 1px solid rgb(223, 220, 220);
        box-shadow: 0px 0px 1px;
        margin-top: 18px;
    }
    .doctor img {
        display: block;
        height: 70px;
        width: 70px;
        border-radius: 35px;
        margin-top: 20px;
        margin-left: 75px;
        
      }
      .yisheng p{
        display: block;
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
      }
      .yisheng span{
        display: block;
        text-align: center;
        font-size: 15px;
        margin-top: 15px;
      }
      .yisheng button{
        background-color: white;
        height: 25px;
        width: 40px;
        color: red;
        margin-top:25px;
        margin-left: 130px;
        border: 1px solid red;
        border-radius: 3px;
      }
</style>
</html>